<template>
  <div>

   <el-button type="success" @click="save()">保存客户等级折扣</el-button>
   <hr style="border:1px solid #eee;margin-bottom:10px;"/> 

    <div style="margin-top:20px;"> 

  <el-row  v-for="(dt,index) in priceList" :key="index" style="margin-bottom:30px;margin-top:10px;">  
    <el-col :span="6" :offset="1">
      <el-rate
          v-model="dt.star"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}">
      </el-rate>
      
    </el-col>
    <el-col :span="6">
      <div v-if="index==0">
        <el-input v-model="priceModel.star1Name"  placeholder="1星客户名称"  style="width:250px;height:30px;" >
          <template slot="prepend">等级名称</template>
        </el-input>
      </div>
      <div v-if="index==1">
        <el-input v-model="priceModel.star2Name"  placeholder="2星客户名称"  style="width:250px;height:30px;" >
          <template slot="prepend">等级名称</template>
        </el-input>
      </div>
      <div v-if="index==2">
        <el-input v-model="priceModel.star3Name"  placeholder="3星客户名称"  style="width:250px;height:30px;" >
          <template slot="prepend">等级名称</template>
        </el-input>
      </div>
      <!--<div v-if="index==3">
        <el-input v-model="priceModel.star4Name"  placeholder="4星客户名称"  style="width:250px;height:30px;" >
          <template slot="prepend">等级名称</template>
        </el-input>
      </div>
      <div v-if="index==4">
        <el-input v-model="priceModel.star5Name"  placeholder="5星客户名称"  style="width:250px;height:30px;" >
          <template slot="prepend">等级名称</template>
        </el-input>
      </div>-->
    </el-col>

    <el-col :span="6">
      <div v-if="index==0">
        <el-input v-model="priceModel.star1Discount" style="width:200px;height:30px;" >
          <template slot="prepend">折扣率</template>
          <template slot="append">%</template>
        </el-input>
      </div>
      <div v-if="index==1">
        <el-input v-model="priceModel.star2Discount" style="width:200px;height:30px;" >
          <template slot="prepend">折扣率</template>
          <template slot="append">%</template>
        </el-input>
      </div>
      <div v-if="index==2">
        <el-input v-model="priceModel.star3Discount" style="width:200px;height:30px;" >
          <template slot="prepend">折扣率</template>
          <template slot="append">%</template>
        </el-input>
      </div>
      <!--<div v-if="index==3">
        <el-input v-model="priceModel.star4Discount" style="width:200px;height:30px;" >
          <template slot="prepend">折扣率</template>
          <template slot="append">%</template>
        </el-input>
      </div>
      <div v-if="index==4">
        <el-input v-model="priceModel.star5Discount" style="width:200px;height:30px;" >
          <template slot="prepend">折扣率</template>
          <template slot="append">%</template>
        </el-input>
      </div>-->
    </el-col>
  
</el-row>  
  </div>
  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as RoundApi from "@/api/RoundApi.js";
import * as Config from "@/api/Config.js";

export default {
  data() {
    return {
      priceModel: {
        star1Name: "车主",
        star2Name: "代理商",
        star3Name: "三星客户",
        star4Name: "四星客户",
        star5Name: "五星客户",
        star1Discount: "100",
        star2Discount: "100",
        star3Discount: "100",
        star4Discount: "100",
        star5Discount: "100"
      },

      priceList: [
        { star: 1, name: "车主" },
        { star: 2, name: "代理商" },
        { star: 3, name: "三星客户" },
//      { star: 4, name: "四星客户" },
//      { star: 5, name: "五星客户" }
      ]
    };
  },

  methods: {
    save() {
      RoundApi.updateDiscount(this, this.priceModel).then(res => {
        if (res.retCode) {
          this.$message("保存成功");
        }
      });
    },
    getList() {
      RoundApi.getDiscountList(this).then(res => {
        if (res.retCode) {
          if(res.data){
            this.priceModel = res.data;
          }
        } else {
        }
      });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
